談這個主題之前,我們先來回憶一下日常的場景,你來到桃子購物網站,選了你要的商品往下捲動網頁,結果竟然發現網頁下方秀出你上次來買東西時,看的那幾樣商品,你心中覺得這個網站真貼心,好聰明。
然而,真正貼心、聰明的是你的瀏覽器。這功能叫做Web Storage,是HTML5之後出來的新技術,網頁可以透過JavaScript把你瀏覽的資料寫入瀏覽器裡儲存,可以儲存的資料容量有5mb大小。
Web Storage有兩種:
如何看到localStorage的資料呢?
在Chrome瀏覽器按下F12,瀏覽器會分割稱瀏覽畫面跟Dev Tool,在Dev Tool那一邊點開Application分頁,就可以看到localStorage儲存的資料。
我們可以觀察到它是以Key - Value pair的方式儲存的,而且是以字串的格式儲存。
那要如何存入資料呢?我們可以使用setItem()方法:
localStorage.setItem(key, value)
sessionStorage.setItem(key, value)
取出資料則是使用getItem():
localStorage.getItem(key)
sessionStorage.getItem(key)
讓我們來看看如何實作:
<h2>報名參加華山論劍</h2>
<input type="text" class="nameClass" />
<input type="button" class="btnApply" value="報名" />
<input type="button" class="btnCheck" value="檢查報名狀況" />
var apply= document.querySelector('.btnApply');
var check=document.querySelector('.btnCheck');
function applyTalk(e){
var str= document.querySelector('.nameClass').value;
localStorage.setItem('applyName',str);
}
apply.addEventListener('click',applyTalk);
check.addEventListener('click',function(e){
var str = localStorage.getItem('applyName');
alert(`${str},你已經報名成功!!!`)
})
前面有提到localStorage只接受字串(String)的資料,如果存的資料不是字串,而是陣列或是物件,就會發生問題。
如何解決這個問題呢?
讓我們來看一下怎麼做:
var island = [
{
islandName: '桃花島',
owner: '黃藥師'
}
];
var islandStr = JSON.stringify(island);
console.log(islandStr); //[{"islandName":"桃花島","owner":"黃藥師"}]
localStorage.setItem('islandItem',islandStr);
var getData = localStorage.getItem('islandItem');
console.log(typeof getData); //string
var getDataAry = JSON.parse(getData); //轉換為陣列
console.log(getDataAry);
這就是localStorage的基本用法。